<template>
  <page-container :title="route.meta.title">
    <a-card style="overflow-x: scroll">
      <a-tabs v-model:activeKey="activeKey" @change="onChange">
        <a-tab-pane key="1" tab="闲鱼" force-render>
          <XianYu ref="XianYuRef"></XianYu>
        </a-tab-pane>
        <a-tab-pane key="2" tab="微信">
          <WeiXin ref="WeiXinRef"></WeiXin>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-container>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import XianYu from './common/xianYu.vue'
import WeiXin from './common/WeiXin.vue'

const XianYuRef = ref<any>()
const WeiXinRef = ref<any>()

const route = useRoute()

const activeKey = ref<string>('1')

const onChange = (key: string) => {
  activeKey.value = key

  if (key === '1') {
    XianYuRef.value.shows()
  } else {
    setTimeout(() => {
      WeiXinRef.value.shows()
    }, 0)
  }
}
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  min-height: 750px;
  margin-bottom: 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  .header-top {
    width: 100%;
    margin-top: 20px;
  }

  .header-bottom {
    margin: 20px 0;
    width: 100%;
  }
}
</style>
